<template>
  <div>
    <h3>商品列表</h3>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <div class="details">
              <el-form-item label="商品 ID">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属分类">
                <span>{{ props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品评论">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.category }}</span>
              </el-form-item>
            </div>
            <!--  -->
            <div class="details">
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.desc }}</span>
              </el-form-item>
            </div>
            <!--  -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="id"> </el-table-column>
      <el-table-column label="所属分类" prop="cla"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片" prop="src"> 
        <template slot-scope="img"><img :src="img.row.src" alt="" style="width:80px;heigth:80px"></template>
      </el-table-column>
      <el-table-column label="商品描述" prop="describe"> </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary" size="mini" plain>编辑</el-button>
        <el-button type="danger" size="mini" plain>删除</el-button>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          cla: "好滋好味鸡蛋仔",
          price: "50",
          src: "https://img0.baidu.com/it/u=3063126680,2250826046&fm=26&fmt=auto",
          describe: "上海市普陀区真北路",
        },
      ],
    };
  },

  methods: {},
};
</script>

<style lang="less" scoped>
h3 {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.demo-table-expand {
  display: flex;
  padding-left: 50px;
  .details {
    width: 50%;
    display: flex;
    flex-direction: column;
  }
}
.block {
  margin-top: 20px;
}
</style>